Canvas

Overview

The visual container. The Canvas is used for accessing properties and functions related to visualization and rendering.

  • From version: 2020.20

Properties

height

height: number

The height of the visual container. Used to calculate the dimension of your visual and fit it to the parent container.

const height = cvApi2.canvas.height;

style

style: Style

The Visual's styles. Used to access the styles object and its theme configurations for styling the custom visual.

const themeIndexColor = cvApi2.canvas.style.getThemeColorByIndex(0);

width

width: number

The width of the visual container. Used to calculate the dimension of your visual and fit it to the parent container.

const width = cvApi2.canvas.width;

Methods

addEventListener

addEventListener ( event : Event , callBack : () => void): void

Method for attaching functions to specific triggered events. This allows methods to be called based on event operations on the canvas or based on user interactions.

function main() {
	cvApi2.canvas.addEventListener(cvApi2.enums.events.Render, render);
}

function render(){
}

Parameters

  • event:Event

    The event that is being subscribed to.

  • callBack:() => void

    The function to invoke when the event is triggered.

      • (): void
      • Returns void
Returns void

getHTMLElement

getHTMLElement (): SVGElement

Gets the visual container's parent HTML element. The parent container is the visual starting point. The custom visual's generated elements will be appended to it in the HTML DOM.

const element = cvApi2.canvas.getHTMLElement();
element.appendChild(foreignObject).appendChild(div);
Returns SVGElement

the visual container's parent HTML element.

isSelectionEnabled

isSelectionEnabled (): boolean

Indication to enable or disable the selection of members and datapoints. Can be used to control the item selection mechanism.

const isSelectionEnable = cvApi2.resultSet.canvas.isSelectionEnabled();
Returns boolean

Indication to enable or disable the selection of members and datapoints.

notifyRenderComplete

notifyRenderComplete (): void

Use this function to notify services that the visual is done rendering. Some services need to know when the render process is done for their process to work correctly. Sometimes the render process can be asynchronous, this function will let you notify those services when you are done rendering. Notice that the services will wait for your notification only if you will set "waitForCompleteNotify" as true in your visual configuration.

cvApi2.canvas.notifyRenderComplete();
Returns void

setCustomCssStyle

setCustomCssStyle ( styles : string): void

Set a specific CSS style for the visual. Used to add inline custom css styling to the visual logic.

function main() {
	cvApi2.canvas.setCustomCssStyle(defineStyles());
}

function defineStyles(){
    return '.axis path,'+
           '.axis line {'+
                'fill: none;'+
                'stroke: #000;'+
                'shape-rendering: crispEdges;}';
}

Parameters

  • styles:string

    CSS code implementation.

Returns void

setExternalStyleSheets

setExternalStyleSheets ( paths : string[]): void

Set external style sheets for the styling of the visual. Used to add entire custom style sheet documents.

cvApi2.canvas.setExternalStyleSheets(['https://kendo.cdn.telerik.com/2021.1.119/styles/kendo.default-v2.min.css']);

Parameters

  • paths:string[]

    Each string represent the address for the style sheet document.

Returns void

showDataPointContextMenu

showDataPointContextMenu ( datapoint : Datapoint , event : MouseEvent<any, MouseEvent>): void

Show the 'Data Point' context menu for the selected datapoint. Provides a method to trigger the data point context menu from Pyramid. Showing the context menu gives the user more options and interactions between the visual and the data.

const datapoint = cvApi2.resultSet.data.getCurrentTrellisData().datapoints[0];

svgElement
.append("path")
.on("contextmenu", function(d) { cvApi2.canvas.showDataPointContextMenu(datapoint, d3.selection.event); });

Parameters

  • datapoint:Datapoint

    A Datapoint for the context menu to interact with.

  • event:MouseEvent<any, MouseEvent>

    DOM mouse event object that will trigger the context menu.

Returns void

showElementsContextMenu

showElementsContextMenu ( elements : Element [] , event : MouseEvent<any, MouseEvent>): void

Show the 'elements' context menu for the selected elements. Provides a method to trigger the member element context menu from Pyramid. Showing the context menu gives the user more options and interactions between the visual and the data.

const elements = cvApi2.resultSet.data.getCurrentTrellisData().datapoints[0].Coordinates;

svgElement
.append("path")
.on("contextmenu", function(d) { cvApi2.canvas.showElementsContextMenu(elements, d3.selection.event); });

Parameters

  • elements:Element[]

    Array of elements you want the context menu to interact with.

  • event:MouseEvent<any, MouseEvent>

    DOM mouse event object that will trigger the context menu.

Returns void